<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include::header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="col-sm-12" style="width: 100%">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>查询条件</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <label class="layui-form-label" style="width: 100px;">所属楼宇</label>
                                    <div class="layui-input-inline">
                                        <select id="floorId" lay-filter="floorId" name="floorId">
                                            <option value="" selected="">请选择楼宇</option>
                                            <option th:each="floor:${floors}" th:value="${floor.id}">[[${floor.floorName}]]</option>
                                        </select>
                                    </div>
                                    <label class="layui-form-label" style="width: 100px;">宿舍名称</label>
                                    <div class="layui-input-inline" id="conditionDiv" >
                                        <input type="text" name="dormName" oninput="searchRe(this)" id="dormName"
                                               lay-verify="title" autocomplete="off"
                                               placeholder="请输入查询内容(模糊搜索)" class="layui-input">
                                    </div>
                                    <div class="layui-input-inline" id="availableDiv" >
                                        <select id="dorm_status" lay-filter="dormStatusName">
                                            <option value="" selected="">请选择状态</option>
                                            <option value="1">可用</option>
                                            <option value="0" >不可用</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="float: right;">
                                        <button type="button" class="btn btn-primary btn-sm" onclick="add()">
                                            <i class="fa fa-plus" aria-hidden="true"></i>添加
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm" onclick="batchRemove()">
                                            <i class="fa fa-trash" aria-hidden="true"></i>批量删除
                                        </button>
                                        <a class="btn btn-info btn-sm ' + s_userComment + '" href="#" mce_href="#"
                                           title="刷新" onclick="reLoad()"><i class="fa fa-refresh"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="dormTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script>
    var currentCondition = "";
    var conditionValue = "";
    var threeValue= "";
</script>
<script type="text/javascript" th:src="@{/static/js/admin/dorm/dorm_list.js}"></script>
</body>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        form.on('select(floorId)', function (data) {
            if (data.value == currentCondition) {
                return;
            } else {
                currentCondition = data.value;
                reLoad();
            }

        });
        form.on('select(dormName)', function (data) {
            if (data.value == conditionValue) {
                return;
            } else {
                conditionValue = data.value;
                reLoad();
            }
        });
        form.on('select(dormStatusName)', function (data) {
            if (data.value == threeValue) {
                return;
            } else {
                threeValue = data.value;
                reLoad();
            }
        });
    });
    function searchRe(){
        conditionValue = $("#dormName").val();
        reLoad();
    }
</script>
</html>